<template>
  <General :metrics="general_metrics" />
  <HeatMap ref="chart_ref" :data="param_metrics" />
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { Metrics } from '@/types/visualization/calculation'
import { MetricsData } from '@/types/visualization/graph'

import { ref, watchEffect } from 'vue'

import General from '@/components/vis-graph/figure/metric/General.vue'
import HeatMap from '@/components/vis-graph/figure/HeatMap/index.vue'

const chart_ref = ref<InstanceType<typeof HeatMap> | null>(null)

defineProps({
  general_metrics: {
    type: Object as PropType<Metrics | Record<string, string>>,
    required: true,
  },
  param_metrics: {
    type: Object as PropType<MetricsData['params']>,
    required: true,
  },
})
</script>

<style scoped></style>
